<template>
	<div>
		<a-layout>
			<a-layout-content style="background: #fff">
				<a-page-header>
					<template slot="extra">
						<a-button @click="reload()" v-has="'user.query'">
							<a-icon type="reload" />
						</a-button>
						<a-button type="primary" @click="addUser" v-has="'user.create'">
							<a-icon type="user-add" />
							添加
						</a-button>
						<a-button type="primary" @click="exportTable">
							<a-icon type="export" />
							导出
						</a-button>
					</template>
					<template slot="title"> {{ $route.meta.title }} </template>
				</a-page-header>

				<a-card :bordered="false">
					<a-form-model layout="inline">
						<a-form-model-item>
							<a-input
								v-model="queryForm.searchkey"
								placeholder="手机/邮箱/姓名"
							>
								<a-icon
									slot="prefix"
									type="user"
									style="color: rgba(0, 0, 0, 0.25)"
								/>
							</a-input>
						</a-form-model-item>
						<a-form-model-item>
							<a-select
								v-model="queryForm.status"
								placeholder="请选择状态"
								style="width: 200px"
								@change="getData"
							>
								<a-select-option
									v-for="(item, key, index) in statusMap"
									:value="key"
									:key="index"
								>
									{{ item.text }}
								</a-select-option>
							</a-select>
						</a-form-model-item>
						<a-form-model-item>
							<a-button
								html-type="submit"
								@click="search"
								:disabled="!queryForm.searchkey"
							>
								查询
							</a-button>
						</a-form-model-item>
						<a-form-model-item>
							<a-button
								@click="clear"
								:disabled="!queryForm.searchkey && !queryForm.status"
							>
								<a-icon type="delete" />
								清空
							</a-button>
						</a-form-model-item>
					</a-form-model>
				</a-card>

				<div style="margin: 10px 16px 0 16px">
					<a-table
						:columns="columns"
						:data-source="data"
						@change="handleTableChange"
						:pagination="pagination"
						:loading="loading"
					>
						<template v-slot:realname="{ realname }">
							<a-tooltip :title="realname" placement="topLeft">
								{{ realname }}
							</a-tooltip>
						</template>

						<template v-slot:username="{ username }">
							<a-tooltip :title="username" placement="topLeft">
								{{ username }}
							</a-tooltip>
						</template>

						<template v-slot:email="{ email }">
							<a-tooltip :title="email" placement="topLeft">
								{{ email }}
							</a-tooltip>
						</template>

						<span slot="sex" slot-scope="text">
							<template>
								<span>{{ sexFilter(text) }}</span>
							</template>
						</span>
						<span slot="status" slot-scope="text">
							<template>
								<a-badge
									:status="statusTypeFilter(text)"
									:text="statusFilter(text)"
								/>
							</template>
						</span>
						<span slot="stop_date" slot-scope="text, record">
							{{ record.stop_date | formatStamp }}
						</span>
						<span slot="action" slot-scope="text, record">
							<template>
								<a @click="getDetail(record)">详情</a>
								<a-divider type="vertical" />
								<a @click="updateUser(record)" v-has="'user.update'">修改</a>
							</template>
						</span>
					</a-table>
				</div>
			</a-layout-content>
		</a-layout>
		<detailPage :showDetail="showDetail" :detailData="detailData"></detailPage>
		<handle-table
			ref="handleTable"
			@handleOk="handleTableChange"
		></handle-table>
	</div>
</template>

<script>
	import detailPage from "./components/detail.vue"
	import momentUtil from "@/utils/day"
	import handleTable from "./components/handleForm.vue"
	const tableObj = require("./json/table.json")
	import User from "@/api/user"
	export default {
		data() {
			this.sexList = ["男", "女"]
			this.statusMap = {
				1: {
					status: "success",
					text: "正常",
				},
				0: {
					status: "default",
					text: "停用",
				},
				"-1": {
					status: "error",
					text: "冻结",
				},
			}
			return {
				detailData: {},
				showDetail: false,
				selectedRowKeys: [],
				queryForm: {
					searchkey: "",
					status: undefined, //placeholder 生效
				},
				data: [],
				columns: tableObj.columns,
				loading: false,
				pagination: {
					current: 1,
					pageSize: 20,
					total: 0,
					totalPage: 0,
					showSizeChanger: true,
					showTotal: (total) => `总 ${total} 条`,
				},
			}
		},
		created() {
			this.getData()
		},

		methods: {
			// calcTableWidth(columns) {
			// 	let totalWidth = 0
			// 	for (let i = 0, len = columns.length; i < len; i++) {
			// 		if (columns[i].width) {
			// 			totalWidth += columns[i].width
			// 		} else {
			// 			totalWidth += 120
			// 		}
			// 	}
			// 	return totalWidth
			// },
			//导出时候,数据要做处理
			exportTable() {
				this.$excelUtil.genTable({
					excelName: `${this.$route.meta.title}`,
					columns: tableObj.columns,
					tableData: this.handleData(this.data),
					filterKeys: ["action"],
				})
			},

			//解析数据中不能识别部分
			handleData(data) {
				return data.map((item) => {
					return Object.assign({}, item, {
						sex: this.sexList[item.sex],
						status: this.statusMap[item.status].text,
						stop_date: momentUtil.timestamp2Day(
							item.stop_date,
							"YYYY-MM-DD hh:mm:ss"
						),
					})
				})
			},

			getDetail(record) {
				this.detailData = record
				this.showDetail = true
			},
			sexFilter(sex) {
				return this.sexList[sex]
			},
			statusFilter(status) {
				return this.statusMap[status + ""].text
			},
			statusTypeFilter(status) {
				return this.statusMap[status + ""].status
			},

			reload() {
				window.location.reload()
			},

			clear() {
				this.queryForm.searchkey = ""
				this.queryForm.status = undefined
				this.getData()
			},
			search() {
				this.data = []
				this.pagination.current = 1
				this.getData()
			},
			addUser() {
				this.$refs.handleTable.showModal("add")
			},
			updateUser(item) {
				this.$refs.handleTable.showModal("update", item)
			},

			//会将form字段带过来。
			handleTableChange(pagination, filters, sorter) {
				console.table(
					[
						{
							pagination: pagination,
							filters: filters,
							sorter: sorter,
						},
					],
					["pagination", "filters", "sorter"]
				)
				if (sorter) {
					if (sorter.order) {
						Object.assign(this.queryForm, {
							order_by: `${sorter.columnKey} ${sorter.order.slice(0, -3)}`,
						})
					} else {
						delete this.queryForm.order_by
					}
				}
				this.pagination = pagination || this.pagination
				this.getData()
			},

			getData() {
				this.loading = true
				let pageMap = {
					page: this.pagination.current,
					pageSize: this.pagination.pageSize,
				}
				User.query(Object.assign(pageMap, this.queryForm))
					.then((res) => {
						this.loading = false
						if (res.code == 1) {
							this.pagination.total = res.page.totalSize
							this.pagination.totalPage = res.page.totalPage
							//dataSource 默认将每列数据的 key 属性作为唯一的标识
							//处理数据，否则需要excel代码里处理了
							this.data = res.data.map((item) => {
								return Object.assign(item, { key: item.id })
							})
						}
					})
					.catch((e) => {
						this.loading = false
					})
			},
		},
		components: {
			handleTable,
			detailPage,
		},
	}
</script>

<style lang="less" type="text/less" scoped></style>
